<template>
  <div class="update-name">
    <van-nav-bar
      title="修改昵称"   
      left-text="取消"
      right-text="完成"
      @click-left="$emit('close')"
      @click-right="onConfirm"
    />

    <div class="name-field-wrap">
      <van-field
      v-model="localName"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入昵称"
      show-word-limit
    />
    </div>
  </div>
</template>

<script>
import {updateUserProfile} from '@/api/user'

export default {
  data() {
    return {
      localName:this.value
    }
  },
  props:{
    value:{
      type:String,
      required:true
    }
  },
  methods: {
    async onConfirm(){
      this.$toast.loading({
        message:'保存中...',
        forbidclick:true
      })
      try {
        const{data} = await updateUserProfile({
          name:this.localName
      })
        this.$emit('close')
        this.$emit('input', this.localName)
        this.$toast.success('更新成功！')
      } catch (err) {
        if (err && err.response && err.response.status === 409) {
          this.$toast.fail('昵称已存在')
        }
      }

    }
  },
}
</script>

<style lang="less" scoped>
.name-field-wrap{
  padding: 10px;
}
</style>